<template>
    <div id="select-cinema">
      <div class="top">
        <span class="icon-back" @click="$router.go(-1)"></span>
        <span class="name ellipsis">{{filmName}}</span>
      </div>
      <ly-tab
        v-model="selectedId"
        :items="scheduleDateList"
        :options="options"
        class="ly-tab"
        v-if="hackReset"
        @change="changeLyTabItem"
      />
      <div class="content" >
        <div class="tips" v-if="cinemaList.length === 0">
          <span class="icon icon-empty-content"></span>
          <span class="text">暂时没有安排场次</span>
        </div>
        <div class="item"  v-for="(item,index) in cinemaList" :key="index"
         @click="$router.push({path:'/cinema_detail',query:{filmId:$route.query.filmId,cinemaId:item.cinemaId}})">
          <div class="left">
            <div class="name ellipsis">{{item.cinemaName}}</div>
            <div class="address ellipsis">{{item.address}}</div>
            <div class="label-block"><span>小吃</span><span>4D厅</span><span>杜比全景声厅</span><span>巨幕厅</span></div>
          </div>
          <div class="right">
            <div class="price-block" v-if="item.minPrice"><span class="price">{{item.minPrice}}</span>元起</div>
          </div>
        </div>
        
      </div>
      
      
      </div>

</template>

<script>
    import {viewerGetMovieDetail,getCurrentMovieSchedule} from '../../api/index'
    import {formatDate} from '../../common/util/util'
    import {getDate} from '../../common/util/util'
    import {Indicator} from 'mint-ui'
    import Vue from 'vue'
    import LyTab from 'ly-tab'
    Vue.use(LyTab);
    export default {
        name: "SelectCinema",
        data(){
          return{
            filmName:'',
            selectedId:0,
            cinemaList:[],
            hasCinemaInfo:[],
            cinemaScheduleInfo:[],
            dateCinemaSchedule:[],
            hackReset:true,
            scheduleDateList:[],
            options:{
              activeColor: '#dd2727',
            },
          }
        },
        created() {
          Indicator.open('Loading...');
          this.loadInfo();
        },
        methods:{
          async loadInfo(){
            
              let json =await viewerGetMovieDetail(this.$route.query.filmId);
              if (json.code===0){
                this.filmName = json.data.filmName;
              }
              //前端生成日期列表
              for (let index = 0; index < 5; index++) {
                this.scheduleDateList.push({label:getDate(-index,new Date())});
              }
              //请求影院
              json = await getCurrentMovieSchedule(this.$route.query.filmId,this.scheduleDateList[0].label);
              console.log(json);
              if (json.code===0){
                this.cinemaList = json.data;
              }
              Indicator.close();
            
            
          },
          //切换日期
         async  changeLyTabItem(item){
            //console.log(item);
             Indicator.open('Loading...');
            let json = await getCurrentMovieSchedule(this.$route.query.filmId,item.label);
            if (json.code===0){
              this.cinemaList = json.data;
            }
            Indicator.close();
          },
      
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  #select-cinema
    width 100%
    height 100%
    color #000
    font-size .3125rem
    .top
      width 100%
      height 1rem
      display flex
      justify-content center
      align-items center
      position fixed
      top 0
      left 0
      background-color #dd2727
      color #fff
      .icon-back
        font-size .4rem
        position absolute
        left .3rem
      .name
        width 60%
        font-size .375rem
        line-height .375rem
        text-align center
    .ly-tab
      position fixed
      top 1rem
      left 0
    .select
      position fixed
      left 0
      top 1.68rem
      width 100%
      height .8rem
      display flex
      justify-content space-around
      align-items center
      border-bottom .03rem solid #f1f1f1
      border-top .03rem solid #f1f1f1
      box-sizing border-box
      background-color #fff
      .option
        width 33.33%
        box-sizing border-box
        padding .1rem .6rem
        display flex
        justify-content center
        align-items flex-end
        font-size .28rem
        border-right .02rem solid #f1f1f1
        &:last-child
          border-right none
        .arrow
          margin-left .1rem
          padding-bottom .05rem
          &::after
            content ''
            width 0
            height 0
            overflow hidden
            font-size 0
            line-height 0
            border-width .1rem
            border-style solid
            border-color #888 transparent transparent transparent
    .content
      margin-top 2rem
      font-size .3125rem
      .item
        display flex
        justify-content center
        align-items center
        box-sizing border-box
        padding .25rem
        width 100%
        margin-bottom .25rem
        .left
          width 100%
          .name
            font-size .345rem
            line-height .36rem
            font-weight 700
            margin-bottom .25rem
          .address
            font-size .28rem
            height .3rem
            color #666
            margin-bottom .25rem
          .label-block
            display flex
            span
              padding .06rem
              font-size .1rem
              border .01rem solid #f90
              margin-right .1rem
              border-radius .04rem
              color #f90
        .right
          width 20%
          text-align center
          .price-block
            color #dd2727
            .price
              font-size .30rem
      .tips
        display flex
        justify-content center
        align-items center
        flex-flow column
        font-size .28rem
        padding-top 4rem
        border-top .04rem solid #f1f1f1
        .icon
          font-size 1.6rem
          margin-bottom .25rem
        .text
          color #ccc        
</style>
